<template>
  <div :style="isWidth">
    <div style="width:100%;background-color:#5777E6;height:28px;"
      @click="collapseMenu">
      <img src="@/assets/menu.png"
        style="float:left;margin:8px 46%;"
        alt />
    </div>

    <el-row class="tac">
      <el-col :span="24">
        <el-menu default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          router
          :collapse='isMenu'
          :collapse-transition='false'
          background-color="#3A4267">

          <template v-if="this.menuData.some((item)=>item.menusEntity.name === '数据看板')">
            <el-submenu index="20">
              <template slot="title">
                <img src="@/assets/报表.png"
                  class="title-icon" />
                <span style="margin-left:5px;color:#fff">数据看板</span>
              </template>
              <template v-if="this.menuData.some((item)=>item.menusEntity.name === 'KPI指标')">
                <el-menu-item index="kpi">
                  <img src="@/assets/kpi.png"
                    class="icon" />
                  <span slot="title">KPI指标</span>
                </el-menu-item>
              </template>
              <template v-if="this.menuData.some((item)=>item.menusEntity.name === '流失分析')">
                <el-menu-item index="3">
                  <img src="@/assets/analyse.png"
                    class="icon" />
                  <span slot="title">流失分析</span>
                </el-menu-item>
              </template>
              <template v-if="this.menuData.some((item)=>item.menusEntity.name === '渠道分析')">
                <el-menu-item index="channel">
                  <img src="@/assets/channel.png"
                    class="icon" />
                  <span slot="title">渠道分析</span>
                </el-menu-item>
              </template>
            </el-submenu>
            <el-divider></el-divider>
          </template>

          <template v-if="this.menuData.some((item)=>item.menusEntity.name === '用户标签')">
            <el-submenu index='30'>
              <template slot="title">
                <img src="@/assets/标签.png"
                  class="title-icon" />
                <span style="margin-left:5px;color:#fff">用户标签</span>
              </template>
              <template v-if="this.menuData.some((item)=>item.menusEntity.name === '标签视图')">
                <el-menu-item index="tag">
                  <img src="@/assets/tag.png"
                    class="icon" />
                  <span slot="title">标签视图</span>
                </el-menu-item>
              </template>
              <template v-if="this.menuData.some((item)=>item.menusEntity.name === '标签编辑管理')">
                <el-menu-item index="tagedit">
                  <img src="@/assets/edit.png"
                    class="icon" />
                  <span slot="title">标签编辑管理</span>
                </el-menu-item>
              </template>
              <template v-if="this.menuData.some((item)=>item.menusEntity.name === '用户全息档案')">
                <el-menu-item index="user">
                  <img src="@/assets/file.png"
                    class="icon" />
                  <span slot="title">用户全息档案</span>
                </el-menu-item>
              </template>
            </el-submenu>
            <el-divider></el-divider>
          </template>

          <template v-if="this.menuData.some((item)=>item.menusEntity.name === '用户行为分析')">
            <el-submenu index='40'>
              <template slot="title">
                <img src="@/assets/行为分析.png"
                  class="title-icon" />
                <span style="margin-left:5px;color:#fff">用户行为分析</span>
              </template>
              <template v-if="this.menuData.some((item)=>item.menusEntity.name === '事件分析')">
                <el-menu-item index="event">
                  <img src="@/assets/echart.png"
                    class="icon" />
                  <span slot="title">事件分析</span>
                </el-menu-item>
              </template>
              <template v-if="this.menuData.some((item)=>item.menusEntity.name === '留存分析')">
                <el-menu-item index="keep">
                  <img src="@/assets/keep.png"
                    class="icon" />
                  <span slot="title">留存分析</span>
                </el-menu-item>
              </template>
              <template v-if="this.menuData.some((item)=>item.menusEntity.name === '漏斗分析')">
                <el-menu-item index="funnel">
                  <img src="@/assets/funnel.png"
                    class="icon" />
                  <span slot="title">漏斗分析</span>
                </el-menu-item>
              </template>
              <template v-if="this.menuData.some((item)=>item.menusEntity.name === '分布分析')">
                <el-menu-item index="distributeAnalysis">
                  <img src="@/assets/spread.png"
                    class="icon" />
                  <span slot="title">分布分析</span>
                </el-menu-item>
              </template>
              <template v-if="this.menuData.some((item)=>item.menusEntity.name === '用户行为路径')">
                <el-menu-item index="14">
                  <img src="@/assets/router.png"
                    class="icon" />
                  <span slot="title">用户行为路径</span>
                </el-menu-item>
              </template>
            </el-submenu>
            <el-divider></el-divider>
          </template>

          <template v-if="this.menuData.some((item)=>item.menusEntity.name === '用户人群')">
            <el-submenu index='50'>
              <template slot="title">
                <img src="@/assets/人群分组.png"
                  class="title-icon" />
                <span style="margin-left:5px;color:#fff">用户人群</span>
              </template>
              <template v-if="this.menuData.some((item)=>item.menusEntity.name === '用户分群')">
                <el-menu-item index="group">
                  <img src="@/assets/group.png"
                    class="icon" />
                  <span slot="title">用户分群</span>
                </el-menu-item>
              </template>
              <template v-if="this.menuData.some((item)=>item.menusEntity.name === '人群分析')">
                <el-menu-item index="crowd">
                  <img src="@/assets/people.png"
                    class="icon" />
                  <span slot="title">人群分析</span>
                </el-menu-item>
              </template>
            </el-submenu>
            <el-divider></el-divider>
          </template>

          <template v-if="this.menuData.some((item)=>item.menusEntity.name === '营销管理')">
            <el-submenu index='60'>
              <template slot="title">
                <img src="@/assets/营销推广.png"
                  class="title-icon" />
                <span style="margin-left:5px;color:#fff">营销管理</span>
              </template>
              <template v-if="this.menuData.some((item)=>item.menusEntity.name === '短信')">
                <el-menu-item index="Message">
                  <img src="@/assets/message.png"
                    class="icon" />
                  <span slot="title">短信</span>
                </el-menu-item>
              </template>
              <!-- <template v-if="this.menuData.some((item)=>item.menusEntity.name === '电子邮件')">
                <el-menu-item index="Email">
                  <img src="@/assets/email.png"
                    class="icon" />
                  <span slot="title">电子邮件</span>
                </el-menu-item>
              </template> -->
               <template v-if="this.menuData.some((item)=>item.menusEntity.name === '定时触发')">
                <el-menu-item index="/ScheduledTask">
                  <i class="iconfont icon-crontab icon" ></i>
                  <span slot="title">定时触发</span>
                </el-menu-item>
              </template>
              <!--  -->
                <template v-if="this.menuData.some((item)=>item.menusEntity.name === '行为触发')">
                <el-menu-item index="/behavior">
                  <img src="@/assets/push.png"
                    class="icon" />
                  <span slot="title">行为触发</span>
                </el-menu-item>
              </template>
              <!-- <template v-if="this.menuData.some((item)=>item.menusEntity.name === '消息通知')">
                <el-menu-item index="Notice">
                  <img src="@/assets/push.png"
                    class="icon" />
                  <span slot="title">消息通知</span>
                </el-menu-item>
              </template> -->
            </el-submenu>

            <el-divider></el-divider>
          </template>

          <template v-if="this.menuData.some((item)=>item.menusEntity.name === '系统管理')">
            <el-submenu index='70'>
              <template slot="title">
                <img src="@/assets/mannagement.png"
                  class="title-icon" />
                <span style="margin-left:5px;color:#fff">系统管理</span>
              </template>
              <template v-if="this.menuData.some((item)=>item.menusEntity.name === '用户管理')">
                <el-menu-item index="/SystemUse">
                  <!-- <img src="@/assets/mannagement.png"
                    class="title-icon" /> -->
                  <i class="iconfont icon-yonghuguanli"
                    style="margin-right: 10px;margin-left: 26px;color:#fff"></i>
                  <span slot="title"
                    style="margin-left:5px;color:#fff">用户管理</span>
                </el-menu-item>
              </template>
              <template v-if="this.menuData.some((item)=>item.menusEntity.name === '角色管理')">
                <el-menu-item index="/RolesSystem"
                  style="alignText:center;">
                  <i class="iconfont icon-guanli1"
                    style="margin-right: 10px;margin-left: 26px;color:#fff"></i>
                  <span slot="title"
                    style="margin-left:5px;color:#fff">角色管理</span>
                </el-menu-item>
              </template>
            </el-submenu>
          </template>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isMenu: false,
      isWidth: {
        width: '200px'
      },
      menuData: []
    }
  },
  mounted () {
    const roleId = window.sessionStorage.getItem('roleId') || null
    if (roleId) {
      this.$http.get(`http://127.0.0.1:8080/userprofile-platform/api/role/menus/list?roleId=${roleId}`).then(res => {
        const { data: { data, msg } } = res
        this.menuData = data
      })
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath);
    },
    collapseMenu () {
      this.isMenu = !this.isMenu
      if (this.isMenu) {
        this.isWidth.width = '64px'
      } else {
        this.isWidth.width = '200px'
      }
    }
  },
};

</script>

<style scoped>
.el-menu {
  background-color: #3a4267 !important;
  border: none;
}

.el-menu-item {
  height: 36px;
  line-height: 36px;
  color: #fff;
}

.icon {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  margin-left: 26px;
  color: #fff;
}
.title-icon {
  margin-left: 15px;
  width: 18px;
  height: 18px;
}

.el-divider--horizontal {
  width: 90%;
  margin: 10px;
  background-color: rgba(255, 255, 255, 0.3);
}

.el-menu-item:hover {
  background-color: rgba(255, 243, 234, 0.3);
}
</style>
